 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>绘图工具</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
min-width:600px;
min-height:767px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=drawing"></script>
<script>
function init(){


    var center = new qq.maps.LatLng(39.916527,116.397128);
    var map = new qq.maps.Map(document.getElementById("container"),{
        center:  center,
        zoom: 14
    });
    var drawingManager = new qq.maps.drawing.DrawingManager({
        drawingMode: qq.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: qq.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                qq.maps.drawing.OverlayType.MARKER,
                qq.maps.drawing.OverlayType.CIRCLE,
                qq.maps.drawing.OverlayType.POLYGON,
                qq.maps.drawing.OverlayType.POLYLINE,
                qq.maps.drawing.OverlayType.RECTANGLE
            ]
        },
        circleOptions: {
            fillColor: new qq.maps.Color(255, 208, 70, 0.3),
            strokeColor: new qq.maps.Color(88, 88, 88, 1),
            strokeWeight: 3,
            clickable: false
        }
    });
    drawingManager.setMap(map);
//设置overlaycomplete事件
    qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(res) {
        //获取到绘制的多边形或者矩形的经纬度坐标数组
if(res.type=="polygon"){
var paths=[];
         var path = res.overlay.getPath().forEach(function(e) {
            document.getElementById("arrPath").innerHTML += "(" + e + "),";
paths.push(new qq.maps.LatLng(e.getLat(),e.getLng()+0.00286));
         });


var polygon = new qq.maps.Polygon({
              map: map,
             path: paths,
             editable:true,
             clickable: true
          });
}
if(res.type=="circle"){ 
            document.getElementById("arrPath").innerHTML += "圆心：(" + res.overlay.getCenter() + "), 半径："+res.overlay.getRadius();


var circle = new qq.maps.Circle({
map: map,
center: new qq.maps.LatLng(res.overlay.getCenter().getLat(),res.overlay.getCenter().getLng()+0.00286),
                     radius: res.overlay.getRadius(),
                     strokeWeight: 2
             });
}
    }); 
}
</script>
</head>
<body onload="init()">
<div>
<div id="container"></div>
<div id="arrPath"></div>
</body>
</html>